<template>
    <el-submenu :index="index">
        <template slot="title">
            <i :class="[menu.icon]"  :style="`font-size: ${fontSize}`"></i>
            <span slot="title" :class="[]">{{menu.name}}</span>
        </template>
        <template v-for="(child,childIndex) in menu.children">
            <template v-if="child.children.length>0" >
                <side-bar-item :key="childIndex" :menu="child" :path="path" :index="`${index}-${childIndex.toString()}`"></side-bar-item>
            </template>
            <el-menu-item v-else :index="child.path" :key="childIndex" :class="[getActive(child)?'is-active-sidebar':'', 'no-select']">
                <i :class="child.icon" :style="`font-size: ${fontSize}`"></i>
                <span slot="title">{{child.name}}</span>
            </el-menu-item>
        </template>
    </el-submenu>
</template>
<script>

/*#region 导入函数*/
import { mapGetters } from "vuex";
import SideBarItem from "./side-bar-item.vue";

/*#endregion*/

export default{
    name: "SideBarItem",
    methods: {

    /*#region 自定义函数(组件change事件等)*/

    /*#endregion*/

    /*#region 数据提交事件*/

    /*#endregion*/

    /*#region 操作函数(handle)*/

    /*#endregion*/

    /*#region 获取数据*/
    getActive(menu) {
        let active = false;
        const _this = this;
        const setChildren = function(item) {
            if (item.path === _this.path) {
                active = true;
                return true;
            }
            if (item.children && item.children.length > 0) {
              item.children.map((childItem) => {
                setChildren(childItem);
              });
            }
        };
        if (menu && menu.path === _this.path) {
            active = true;
            return active;
        } else {
            menu.children && menu.children.map((child) => {
                setChildren(child);
            });
            return active;
        }
    }

    /*#endregion*/

    },

    /*#region 生命周期函数(created、mount、等)*/

    /*#endregion*/

    /*#region 注册绑定数据*/

    components: {
        SideBarItem
    },
    computed: {
        ...mapGetters(["isCollapse"]),
        fontSize() {
            return this.isCollapse?"20px":"16px"
        }
    },
    data(){
        return{}
    },
    props: {
        menu: {
            type: Object,
            default: {
                path: ""
            }
        },
        path: {
            type: String,
            default: ""
        },
        index: {
            type: [String, Number],
            default: 0
        }
    }

    /*#endregion */

}
</script>
<style scoped lang="scss">
.is-active-sidebar{
    background-color: #1e88e5;
    color: #ffffff;
    & .fa, span{
        color: #ffffff;
    }
    &:hover, &:active, &:focus{
        color: #1e88e5;
        background-color: #e3f2fd;
        & .fa, span{
            color: #1e88e5;
        }
    }
}
.no-select{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
</style>